import React from 'react';
import { Card, Row, Col } from 'antd';
import { useNavigate } from 'react-router-dom';
import styles from './index.module.css';

const Learn: React.FC = () => {
  const navigate = useNavigate();

  return (
    <div className={styles.container}>
      <h2>学习中心</h2>
      <Row gutter={[16, 16]}>
        <Col span={8}>
          <Card 
            hoverable 
            onClick={() => navigate('/learn/course')}
            title="课程学习"
          >
            系统化的编程课程学习
          </Card>
        </Col>
        {/* 可以添加更多学习资源卡片 */}
      </Row>
    </div>
  );
};

export default Learn; 